<script lang="ts" setup>
import Catenary from "../components/unicom/Catenary.vue";
import Union from "../components/unicom/Union.vue";
import homeIcon from "../common/type/unicom/icon";

function GoHandle() {
    // alert("GoHandle")
}
function buyPhoneHandle() {
    // alert("buyPhoneHandle")
}
</script>
<template>
    <div class="head-bg">
        <div class="logo">
            <img class="unicom" src="../assets/images/home/unicom.png">
            <img class="txz" src="../assets/images/home/txz.png">
        </div>
        <div class="decorate">
            <img class="phone_bill" src="../assets/images/home/phone_bill.png">
            <img class="gift-bag" src="../assets/images/home/gift-bag.png">
        </div>
    </div>
    <div class="container">
        <div class="content">
            <div class="notice bor">
                <img class="img" src="../assets/images/home/notice.jpg" alt="notice">
                <div class="detail">
                    <span>“跟着小租来省钱，一个月省399，一年就是一部新手机！羊毛此时不薅，更 待何时！”</span>
                    <img class="GO" @click="GoHandle" src="../assets/images/home/GO.png" alt="GO">
                </div>
            </div>
            <Catenary></Catenary>
            <div class="activity bor mtop">
                <Union title="活动对比"></Union>
                <div class="item one">
                    <span class="title">活动一:</span>
                    <div class="box">
                        <img src="../assets/images/home/phone.png">
                        <div class="info">
                            <span class="phone">租新机需10元</span>
                            <div class="say">
                                <div class="plus">
                                    <div class="i"></div>
                                    <div class="i"></div>
                                </div>
                                <span>每月话费10元</span>
                            </div>
                            <div class="line"></div>
                            <span class="all">共花费20元</span>
                        </div>
                    </div>
                </div>
                <img class="vs" src="../assets/images/home/vs.png">
                <div class="item two">
                    <span class="title">活动二:</span>
                    <div class="box">
                        <img src="../assets/images/home/phone.png">
                        <div class="info">
                            <span class="phone">租新机需10元</span>
                            <div class="say">
                                <div class="plus">
                                    <div class="i"></div>
                                    <div class="i"></div>
                                </div>
                                <span>12月</span>
                            </div>
                            <div class="line"></div>
                            <span class="all">共花费20元</span>
                        </div>
                    </div>
                </div>
                <img class="assistant" src="../assets/images/home/assistant.png" alt="assistant">
            </div>
            <Catenary></Catenary>
            <div class="introduce bor mtop">
                <Union title="活动介绍"></Union>
                <div class="head">
                    <img class="group" src="../assets/images/home/group.png" alt="group">
                    <div class="text">
                        <h2 class="title f16">现租手机即刻赠送一年手机话费</h2>
                        <span class="f12">联通直播卡：网速提升50%！高质量网络， 别人不能上网你能上，别人能上网你更快！</span>
                    </div>
                </div>
                <div class="box f14">
                    <div class="row row1 bold bb">
                        <div class="item"></div>
                        <div class="item bl">套餐1</div>
                        <div class="item bl">套餐2</div>
                        <div class="item bl">套餐3</div>
                    </div>
                    <div class="row row2 bb">
                        <div class="item">套餐月费</div>
                        <div class="item bl">
                            <img src="../assets/images/home/199.png" alt="">
                        </div>
                        <div class="item bl">
                            <img src="../assets/images/home/299.png" alt="">
                        </div>
                        <div class="item bl">
                            <img src="../assets/images/home/399.png" alt="">
                        </div>
                    </div>
                    <div class="row row1 bb">
                        <div class="item">国内流量</div>
                        <div class="item bl">500min</div>
                        <div class="item bl">500min</div>
                        <div class="item bl">500min</div>
                    </div>
                    <div class="big-row bb">
                        <div class="set-meal">套餐资费</div>
                        <div class="bl right-flex">
                            <span>1.国内语音拨打0.15元/分钟</span>
                            <span>2.发短、彩信0.10元/条</span>
                            <span>3.国内流量3元/GB</span>
                        </div>
                    </div>
                    <div class="row row1 bb">
                        <div class="item">上行峰值速度</div>
                        <div class="item bl">150M</div>
                        <div class="item bl">150M</div>
                        <div class="item bl">200M</div>
                    </div>
                    <div class="small-row bb">
                        <div class="set-meal">套餐资费</div>
                        <div class="bl">QCI 6级(相较常规卡信号更好)</div>
                    </div>
                    <div class="max-row">
                        <div class="set-meal">套餐资费</div>
                        <div class="bl right-flex">
                            <span> 1.国内接听免费</span>
                            <span> 2.来电显示</span>
                            <span> 3.联通云盘（基础版）</span>
                            <span> 4.视频彩铃</span>
                            <span> 5.含漏话提醒</span>
                            <span> 6.含手机邮箱业务</span>
                            <span> 7.联通plus黄金会员</span>
                        </div>
                    </div>
                </div>
                <img class="rent" src="../assets/images/home/rent.png" alt="rent" srcset="">
            </div>
            <Catenary></Catenary>
            <div class="recommend bor mtop">
                <Union title="单品推荐"></Union>
                <div class="list">
                    <div class="item" v-for="item in 6" :key="item">
                        <img class="phone" src="../assets/images/home/phone.png" alt="phone">
                        <div class="info">
                            <span class="title f16 bold">iPhone 13 Pro Max</span>
                            <div class="tag">
                                <span>256G</span>
                                <span>全新</span>
                                <span>A15仿生芯片</span>
                            </div>
                            <div class="change">
                                <div class="price">
                                    <span class="symbol">￥</span>
                                    <span class="value f16">15.</span>
                                    <span class="day">34/天</span>
                                </div>
                                <div class="btn" @click="buyPhoneHandle">立即抢购</div>
                            </div>
                        </div>
                    </div>
                    <img class="l-round" src="../assets/images/home/round.png" />
                    <img class="r-round" src="../assets/images/home/round.png" />
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="head">
                <img src="../assets/images/home/logo.png" alt="logo">
                <span>挺想租品牌保障</span>
            </div>
            <div class="advantage">
                <div class="item" v-for="(item, index) in homeIcon" :key="index">
                    <img :src="item.path">
                    <span>{{ item.title }}</span>
                </div>
            </div>
            <img class="zfb" src="../assets/images/home/zfb.png" alt="zfb">
        </div>
    </div>
</template>
<style lang="scss" scoped>
.bor {
    border-radius: 25px;
    border: 8px solid #F6A97E;
    background-color: #FFF6D5;
}

.bt {
    border-top: 1px solid rgba(85, 85, 85, 1);
}

.br {
    border-right: 1px solid rgba(85, 85, 85, 1);
}

.bb {
    border-bottom: 1px solid rgba(85, 85, 85, 1);
}

.bl {
    border-left: 1px solid rgba(85, 85, 85, 1);
}



.mtop {
    margin-top: -50px;

}

.head-bg {
    width: 750px;
    height: 1320px;
    background-image: url("../assets/images/home/head-bg.jpg");
    background-size: 100% 100%;

    .logo {
        display: flex;
        align-items: center;
        margin-left: 24px;
        z-index: 9999;

        .unicom {
            width: 166px;
            height: 166px;
        }

        .txz {
            width: 72px;
            height: 66px;
            padding-left: 24px;
            border-left: 1px solid #FFFFFF;
        }
    }

    .decorate {
        .phone_bill {
            width: 750px;
            margin-top: -150px;
            z-index: 1000;
            position: relative;
        }

        .gift-bag {
            width: 750px;
            z-index: 500;
            position: relative;
            margin-top: -280px;
        }
    }
}

.container {
    background-color: #df351b;
    position: relative;

    .content {
        margin-top: -1px;
        width: 750px;
        padding: 0 48px 60px;

        transform: translateY(-500px);

        .notice {
            width: 100%;
            height: 330px;
            display: flex;

            .img {
                width: 190px;
                object-fit: contain;
            }

            .detail {
                overflow: hidden;
                margin-top: 70px;
                padding: 20px;
                color: #504F4A;

                .GO {
                    margin-top: 20px;
                    width: 360px;
                }
            }
        }

        .activity {
            padding: 24px;

            .one {
                margin-top: 30px;
                color: #6E6F6B;
                background-color: #F0EDE1;

                .say {
                    .plus {
                        background-color: #6E6F6B;
                    }
                }

                .line {
                    background-color: #6E6F6B;
                }
            }

            .two {
                margin-top: -100px;
                color: #E7514F;
                background-color: #FFE5E2;

                .say {
                    .plus {
                        transform: rotate(45deg);
                        background-color: #E74E4D;
                    }
                }

                .line {
                    background-color: #E7514F;
                }
            }

            .item {
                width: 590px;
                height: 326px;
                padding: 30px;

                .title {
                    display: inline-block;
                    font-size: 30px;
                    font-weight: bold;
                    margin-bottom: 30px;
                }

                .box {
                    display: flex;

                    img {
                        margin: 0 30px;
                        width: 145px;
                        object-fit: contain;
                    }

                    .info {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        width: 400px;

                        span {
                            margin-right: 20px;
                        }

                        .say {
                            margin-top: 15px;
                            display: flex;
                            align-items: center;
                            width: 250px;
                            justify-content: space-between;

                            .plus {
                                width: 25px;
                                height: 25px;
                                border-radius: 50%;
                                position: relative;

                                .i {
                                    width: 16px;
                                    height: 2px;
                                    background-color: white;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;

                                    &:nth-of-type(1) {
                                        transform: translate(-50%, -50%) rotate(90deg);
                                    }

                                    &:nth-of-type(2) {
                                        transform: translate(-50%, -50%)
                                    }
                                }
                            }
                        }

                        .line {
                            width: 280px;
                            height: 1px;
                            margin: 15px 0;
                        }
                    }
                }
            }

            .vs {
                width: 121px;
                height: 121px;
                margin-left: 55%;
                z-index: 1000;
                transform: translate(-50%, -50px);
            }

            .assistant {
                width: 372px;
                margin-left: 50%;
                margin-top: 20px;
                transform: translateX(-50%);
            }
        }

        .introduce {
            padding-bottom: 24px;
            overflow: hidden;

            .head {
                padding: 0 40px;
                display: flex;
                margin-bottom: 32px;
                margin-top: 34px;

                .group {
                    width: 73px;
                    height: 122px;
                }

                .text {
                    margin-left: 15px;

                    .title {
                        margin-bottom: 10px;
                    }
                }
            }

            .box {
                height: 910px;
                width: 590px;
                margin-left: 25px;
                border: 1px solid rgba(69, 69, 69, 0.47);
                color: rgba(85, 85, 85, 1);

                .row {
                    display: flex;

                    .item {
                        width: 146px;

                        &:nth-of-type(1) {
                            width: 184px;
                            text-align: center;
                            border-left: none;
                        }
                    }
                }

                .row1 {
                    .item {
                        height: 76px;
                        width: 146px;
                        line-height: 76px;
                        text-align: center;
                    }
                }

                .row2 {
                    .item {
                        height: 78px;
                        line-height: 78px;
                        display: flex;
                        justify-content: center;

                        img {
                            height: 78px;
                            object-fit: contain;
                        }
                    }
                }

                .set-meal {
                    width: 184px;
                    text-align: center;
                }

                .right-flex {
                    width: 438px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 30px;
                }

                .big-row {
                    display: flex;
                    height: 174px;

                    .set-meal {
                        line-height: 174px;
                    }
                }

                .small-row {
                    display: flex;
                    height: 76px;

                    .set-meal {
                        line-height: 76px;
                    }

                    .bl {
                        width: 438px;
                        line-height: 76px;
                        text-align: center;
                    }
                }

                .max-row {
                    display: flex;
                    height: 342px;

                    .set-meal {
                        line-height: 342px;
                    }
                }
            }

            .rent {
                width: 500px;
                margin-top: 24px;
                margin-left: 50%;
                transform: translateX(-50%);
            }
        }

        .recommend {
            .list {
                display: flex;
                align-items: center;
                margin-top: 32px;
                flex-direction: column;
                padding-bottom: 60px;
                position: relative;

                .item {
                    width: 590px;
                    height: 195px;
                    display: flex;
                    padding: 24px;
                    background-color: white;
                    margin-bottom: 16px;

                    .phone {
                        width: 102px;
                        height: 140px;
                        margin-right: 70px;
                    }

                    .info {
                        display: flex;
                        flex-direction: column;

                        .tag {
                            margin: 10px 0;

                            span {
                                font-size: 20px;
                                padding: 5px 10px;
                                margin-right: 10px;
                                border: 1px solid black;
                            }
                        }

                        .change {
                            margin-top: 10px;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: space-between;

                            .price {
                                color: rgba(228, 60, 58, 1);

                                .symbol,
                                .day {
                                    font-size: 18px;
                                }

                                .value {
                                    font-size: 26px;
                                }
                            }

                            .btn {
                                color: white;
                                margin-left: 30px;
                                width: 176px;
                                height: 52px;
                                text-align: center;
                                line-height: 52px;
                                border-radius: 30px;
                                background-image: linear-gradient(to right, #FF9118, #FC4324);
                            }
                        }
                    }
                }

                .l-round,
                .r-round {
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    bottom: 24px;
                }

                .l-round {
                    left: 20px;
                }

                .r-round {
                    right: 20px;
                }
            }
        }
    }

    .footer {
        position: absolute;
        width: 750px;
        height: 498px;
        bottom: 0;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;

        .head {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 48px;

            img {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }

            span {
                font-size: 32px;
            }
        }

        .advantage {
            display: flex;
            margin: 40px 0 70px;

            .item {
                margin-right: 40px;
                display: flex;
                align-items: center;
                flex-direction: column;

                &:last-of-type {
                    margin-right: 0;
                }

                img {
                    width: 80px;
                    height: 80px;

                }
            }
        }

        .zfb {
            width: 308px;
        }
    }
}
</style>